<template>
	<view style="padding: 40rpx;">
		<u-form :model="createForm" ref="createForm" label-position="top">
			<u-form-item label="收款金额" prop="order_price" required>
				<u-input v-model="createForm.order_price" type="number" placeholder="请输入收款金额"/>
			</u-form-item>
			<u-form-item label="积分可抵扣金额" prop="max_deduction_price">
				<u-input v-model="createForm.max_deduction_price" type="number" placeholder="请输入积分可抵扣金额"/>
				<u-icon name="question-circle-fill" slot="right" style="color:#000;font-size: 40rpx;" 
						@click="showItemDesc('设置最大可使用积分抵扣的金额。不填或小于等于 0，则表示不允许用积分抵扣。如：收款金额设置100，积分可抵扣金额设置40，最低付款为60')"></u-icon>
			</u-form-item>
			<u-form-item label="是否赠送积分" prop="commission_status">
				<u-switch v-model="createForm.commission_status" size="40"></u-switch>
				<u-icon name="question-circle-fill" slot="right" style="color:#000;font-size: 40rpx;"
						@click="showItemDesc('只限现金支付生效，平台将抽取实付金额3%的佣金，发放实付金额100%积分。')"></u-icon>
			</u-form-item>
		</u-form>
		<u-button style="margin-top: 50rpx;" @click="formSubmit" type="warning">生成收款码</u-button>
		
		<u-popup v-model="cashCode.visible" length="100%" mode="top" closeable>
			<view v-if="cashCode.image" style="display: flex;width: 100vw;height: 100vh;align-items: center;justify-content: center;">
				<image :src="cashCode.image" style="width: 400rpx;height: 400rpx;"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import QRCode from 'qrcode';
	let that;
	export default{
		data(){
			return {
				createForm:{
					id:0,
					order_price: '',
					max_deduction_price: '',
					commission_status: false,
					cashier:0
				},
				rules:{
					order_price:[
						{ required: true,message: '请输入收款金额',trigger: ['blur', 'change'] },
					],
					max_deduction_price:[
						{
							validator: (rule, value, callback) => {
								if( value && that.createForm.order_price && parseFloat(value) > parseFloat(that.createForm.order_price) ){
									return false;
								}
								return true;
							},
							message: '积分可抵扣金额错误',trigger: ['change','blur'],
						}
					]
				},
				cashCode:{
					visible:false,
					image:''
				}
			}
		},
		beforeCreate(){
			that = this;
		},
		async onLoad(opt){
			let mch_id = uni.getStorageSync("mch_id");
			if(!mch_id){
				this.navBack();
				return ;
			}
			this.createForm.id = mch_id;
			this.createForm.cashier = opt.cashier ?? 0;
			
			// const options = {
			// 	width: 300,  // 二维码的宽度
			// 	height: 300, // 二维码的高度
			// };
			// let url = '123';
			// // let url = cover.link.indexOf('?')  !== -1 ? cover.link+"&pid=" + userInfo.pid : cover.link+"?pid=" + userInfo.pid;
			// let codeUrl =  await QRCode.toDataURL(url,options)
			// console.log(123,codeUrl)
		},
		onReady() {
			this.$refs.createForm.setRules(this.rules);
		},
		methods:{
			showItemDesc(content){
				uni.showModal({
					title:"温馨提示",
					content,
					showCancel:false,
				})
			},
			formSubmit(){
				let user = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : {};
				let user_id = user.user_id ?? 0;
				that.$refs.createForm.validate(async (valid) => {
					if (valid) {
						uni.showLoading({title:'请稍等...'});
						let url = window.location.protocol + '//' + window.location.host + window.location.pathname + '#/mch/personalCentre/ercode/payPages/transfer?mall_id=5&pid='+user_id;

						// for(let key in that.createForm){
						// 	let value = that.createForm[key];
						// 	if(!value){
						// 		continue ;
						// 	}
						// 	if(typeof value === 'boolean'){
						// 		 value = value ? 1 : 0;
						// 	}
						// 	url += "&"+key+'='+value;
						// }
						
						
						let str = JSON.stringify(that.createForm);
						url += "&data=" + btoa(str);
						
						const options = {
							width: 300,  // 二维码的宽度
							height: 300, // 二维码的高度
						};
						let codeUrl = await QRCode.toDataURL(url,options)
						uni.hideLoading();
						that.cashCode.image = codeUrl;
						that.cashCode.visible = true;
						console.log(123,url)
					}
				});
			}
		}
	}
</script>

<style>
</style>